<template>
    <el-card>
        <template #header>
            <label style="font-size: 30px; ">关注列表</label>
        </template>
        <el-empty v-if="stars.length == 0" description="未找到关注记录"/>
        <div v-else v-for="(person, index) in stars" :key="index">
            <el-row>
                <el-col :span="4" class="avatar">
                    <el-avatar shape="square" :src="person.imgUrl" :size="50" @error="loadFail()">
                        <img
                            alt="img"
                            src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"
                        />
                    </el-avatar>
                </el-col>
                <el-col :span="10">
                    <div class="title" @click="toLink(person.authorId)">
                        {{person.name}}
                    </div>
                    <div style="font-size: 14px; margin: 10px 0 0 10px; ">
                        {{person.intr}}
                    </div>
                </el-col>
                <el-col :span="5">
                    <div class="date">
                        <label>关注日期:</label><br/>
                        <label>{{person.date}}</label>
                    </div>
                </el-col>
                <el-col :span="5" class="option">
                    <el-dropdown>
                        <div class="s-btn">
                            <em class="el-icon-more mr-4"/>
                            <label class="s-text">已关注</label>
                        </div>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item @click="deleteStar(index)">
                                    <label style="color: red; cursor: pointer; ">取消关注</label>
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </el-col>
            </el-row>
            <el-divider/>
        </div>
    </el-card>
</template>

<script>
import axios from "@/utils/MyAxios"
import qs from "qs"
import { ElMessageBox } from 'element-plus'
export default {
    mounted(){
        let user = JSON.parse(localStorage.getItem('user'))
        if (user != null) {
            this.$store.commit('setToken', user.token)
        }
        console.log(this.token)
        this.updateInfo()
    },
    data() {
        return {
            stars: []
        }
    },
    computed: {
        token() {
            return this.$store.state.user.token
        }
    },
    methods: {
        updateInfo() {
            axios.post('/api/follow/list', qs.stringify({token: this.token}))
                .then(res => {
                    const data = res.data
                    console.log(res)
                    if (data.code == 0) {
                        this.stars = data.data.followLists
                    }
                })
        },
        deleteStar(index) {
            ElMessageBox.confirm(
                '取消对该作者的关注. 您继续吗?',
                'Warning',
                {
                    confirmButtonText: '继续',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            )
                .then(() => {
                    axios.post('/api/follow/delete', qs.stringify({token: this.token, followId: this.stars.at(index).followId}))
                        .then(res => {
                            const data = res.data
                            if (data.code == 0) {
                                this.$message.success({message:'已取消关注',showClose: true})
                                this.stars.splice(index, 1)
                            }
                        })
                })
        },
        toLink(id) {
            const { href } = this.$router.resolve({
                path: '/portal',
                query: {
                authorId: id
                }
            })
            window.open(href, '_blank')
        },
        loadFail() {

        }
    }
}
</script>

<style scoped>
.mr-4 {
    margin-right: 4px;
}
.avatar {
    padding-left: 50px;
}
.pointer {
    cursor: pointer;
}
.title {
    font-size: 18px;
    cursor: pointer;
    text-decoration: underline;
}
.option {
    padding-left: 118px;
    padding-top: 5px;
}
.s-btn {
    vertical-align: middle;
    background-color: #e5e9ef;
    border-radius: 4px;
    padding: 4px 11px 4px 9px;
    line-height: 16px;
    border: 0;
}
.s-text :hover{
    color: blue;
}
.date {
    width: 100%;
    height: 100%;
    text-align: center;
}
</style>